/**
 * Created Yaro on 2017/8/25.
 */
"use strict";
//=============
// 引入程序依赖
//=============
import React, { Component } from "react" ;
import { connect } from "react-redux" ;
import { mapStateToProps, mapDispatchToProps } from "./MobileFilmDetailRedux" ;
import { Link, browserHistory } from "react-router" ;

//交互依赖
import NetworkEngine from "../../../utils/NetworkEngine" ;
import UrlManager from "../../../utils/UrlManager" ;

//图片导入
import back from "../../../static/img/h5/return.png";
import bofang from "../../../static/img/h5/bofan.png";
import like from "../../../static/img/h5/xihuan.png";
import pinlun from "../../../static/img/h5/pinlun.png";
import head from "../../../static/img/h5/head.png";
import geren from "../../../static/img/h5/V-geren.png";
import dianzan from "../../../static/img/h5/dianzan.png";
import xiala from "../../../static/img/h5/xiala.png";
import tupian from "../../../static/img/h5/1.jpg";


class MobileFilmDetailContainer extends Component{
    constructor(props){
        super(props) ;
        this.state={
            pageSize:1,
            visibile:0,
            textAreaType:2,  //测试登录or未登录暂时写死
            list:[],
        }
    }
    initialVideo() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.filmVideoUrl() + `/${this.props.params.id}`,
        ).then(
            data => {
                console.log("filmDetail = ", data);
                let _data = data.data.data;
                let videoUrl = _data.video;
                this.setState({
                    VideoUrl: videoUrl,
                    video320: "http://testcdn.keelean.com/" + _data.video320,
                    video480: "http://testcdn.keelean.com/" + _data.video480,
                    video720: "http://testcdn.keelean.com/" + _data.video720,
                })
                let vi = _data.video;
                let views = _data.views;
                this.setState({
                    views: views
                })
                // alert(views)
                if (_data.filmType === "0") {
                    this.setState({
                        typeVideo: 1
                    })
                    this.ponentDidMount();
                } else if (_data.filmType === "1") {
                    this.setState({
                        typeVideo: 0
                    })
                    $(this.refs.native).html(vi);
                } else {
                    this.setState({
                        typeVideo: 1
                    })
                    this.ponentDidMount();
                }
                this.setState({
                    likeNum: _data.likeNum,
                })
                this.props.initialVideo(_data);
            }
        )
    }
    ponentDidMount() {
        var videoObject = {
            container: "#video_ele",
            variable: "player",
            volume: 0.6,
            poster: "", //封面图片地址
            autoplay: false, //是否自动播放，默认true=自动播放，false=默认暂停状态
            loop: false, //是否循环播放，默认false=不需要,true=需要
            live: false, //是否是直播，默认false=点播放，true=直播
            loaded: "loadedHandler", //当播放器加载后执行的函数
            seek: 0, //默认需要跳转的时间
            drag: "start", //在flashplayer情况下是否需要支持按关键帧拖动，不需要留空，需要请填写拖动时请求的属性，本例中使用start，如果需要强制按时间点拖动则增加前缀time_，本例中即time_start，如果需要强制按关键帧进行拖动，则前缀是frames_，本例中即：frames_start
            front: "", //前一集按钮点击触发函数，即点击前一集时调用的函数名称，默认为空
            next: "", //下一集按钮点击触发函数，即点击下一集时调用的函数名称，默认为空
            flashplayer: false,//强制使用flashplayer
            html5m3u8: true,//是否使用hls，默认不选择，如果此属性设置成true，则不能设置flashplayer:true,
            track: [
                {
                    kind: "subtitles",
                    label: "English",
                    srclang: "en",
                    src: "res/zm/cs.vtt",
                    default: true
                },
                {
                    kind: "subtitles",
                    label: "中文",
                    srclang: "zn",
                    src: "res/zm/cs2.vtt",
                    default: false
                },
            ],//系统内置字幕轨道，目前大部分浏览器都不支持
            chtrack: {
                src: "srt.srt",
                charset: "utf-8"
            },//chplayer使用的字幕文件及编码
            preview: {
                src: ["", ""],
                scale: 2
            },//预览图片地址数组，src=图片地址数组，scale=图片截取时间间隔，单位：秒
            debug: false,//是否开启调试模式，默认false，不开启
            video: [
                [this.state.video320, "video/mp4", "标清", 100],
                [this.state.video480, "video/mp4", "高清", 10],
                [this.state.video720, "video/mp4", "超清", 20]
            ]//视频地址数组。视频地址可以分多种形式，具体在下面会有详细介绍
        };
        var player = new chplayer(videoObject);
    }
    componentWillMount() {
        // this.initialViews();
        this.initialCreator();
        this.initialFilmComment();
        this.initialVideo();
        this.initialOtherFilms();
        this.initialDescription();

    }

 /*   initialViews() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.increaseViews() + `/${this.props.params.id}`,
        ).then(
            data => {
                this.props.initialVideo();
            }
        )

    }*/

    initialCreator() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.filmDetailGetCreator(),
            {
                "filmId": this.props.params.id,
                "userId": sessionStorage.getItem("id"),
            }
        ).then(
            data => {
                if (data.data.status === "0") {
                    this.props.initialCreator(data.data.data);
                }
            }
        ).catch(
            err => {

            }
        )
    }

    initialFilmComment() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.filmGetCommentFirst() + `/${this.props.params.id}`,
        ).then(
            data => {
                this.props.initialComment(data.data.data);
            }
        ).catch(
            err => {
                console.log(err);
            }
        )
    }

    initialOtherFilms() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.otherFilms() + `/${this.props.params.id}`,
        ).then(
            data => {
                this.props.initialOtherFilms(data.data.data);
            }
        )
    }

    initialDescription() {
        let urlManager = new UrlManager();
        NetworkEngine(
            "get",
            urlManager.filmDescription() + `/${this.props.params.id}`,
        ).then(
            data => {
                this.props.initialDescription(data.data.data);
                this.props.initialLogo(data.data.data);

            }
        ).catch(
            err => {

            }
        )
    }

    // 点赞
    dianZan(e) {
        e.preventDefault();
        /*if (sessionStorage.getItem("id") == "" || sessionStorage.getItem("id") == null) {
            browserHistory.push("/");
        }
        else {*/
            let urlManager = new UrlManager();
            NetworkEngine(
                "post",
                urlManager.like(),
                {
                    filmId: this.props.params.id,
                    userId: sessionStorage.getItem("id")
                }
            ).then(
                data => {
                    /*
                    let _data = data.data;
                    if (_data.status === 0) {
                        $(".dongxiao-img").addClass("dongxiao");
                        setTimeout(function () {
                            $(".dongxiao-img").removeClass("dongxiao");
                        }, 800);
                        this.setState({
                            likeNum: this.state.likeNum + 1,
                        }, () => {
                            console.log("wwwwwwwwwwwwwww", this.state.val)
                        })
                    }
                    */
                }
            ).catch(
                err => {
                    console.log(err);
                }
            )
        /*}*/
    }



    // 点赞
    like(){
        let likeNum = this.refs.like.value;
        this.refs.like.innerText=likeNum+1
    }

    // 回复取消
    cancel(){
      console.log("==回复的内容=="+this.refs.comment.value);
      this.refs.comment.value="";
    }
    // 回复内容长度限制
    showLength(e) {
        let text = $(this.refs.comment).val();//textarea的内容
        console.log(text);
        let left = 2000 - text.length;//剩余字数
        console.log(left);
        let num = $(this.refs.num).text(left);//还可以输入的字数
    }
    //返回上一页
    back() {
        history.go(-1);
    }
    //  评论发送
    send(e) {
        e.preventDefault();
        let content = this.refs.comment.value;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.saveComment(),
            {
                "content": content,
                "userId": sessionStorage.getItem("id"),
                "filmId": this.props.params.id
            }
        ).then(
            data => {
                // location.reload();
                this.initialFilmComment(e)
                this.refs.comment.value = "";
            }
        )
    }
    render(){
        return(
            <div>
                {/*视频播放*/}
                <div className="video-player">
                    <div className="player-title">
                        <div className="big">
                            <img src={back} alt="返回" onClick={this.back.bind(this)} />
                            <span>毕业作品《少年》</span>
                        </div>
                        <div className="small">
                            <span>剧情短片</span>｜
                            <span>励志</span>｜
                            <span>06"34"</span>
                        </div>
                    </div>
                    <div className="player-img" id="video_ele"></div>
                    <ul className="player-num">
                        <li className="num-play"><img src={bofang} alt="播放次数" />123456次播放</li>
                        <li className="num-like" ref="like" value="9843"><img src={like} alt="喜欢次数"/>9843</li>
                        <li className="num-message" ref="commentSum" value="4343"><img src={pinlun} alt="评论次数" />4343</li>
                    </ul>
                    <div className="player-writer clearfix">
                        <div className="writer-img">
                            <img src={head} alt="作者头像" />
                        </div>
                        <ul className="writer-text">
                            <li className="text1">唐本达<img src={geren} alt="姓名" /></li>
                            <li className="text2">导演／编剧</li>
                            <li className="text3">面对父亲留下的奖牌，阿力曾仰望和渴望。泳池中的上浮与沉没也如阿力内心纠葛，意识和现实交织在阿力脑海中，充满着不同力量关系的对抗。偶然听到一段不曾被发现的录音。</li>
                        </ul>
                    </div>
                    <div className="praise"><img src={dianzan} alt="点赞" onClick={this.dianZan.bind(this)}/></div>
                   {/* <div className="zan" onClick={this.dianZan.bind(this)}>
                        <div className="qipao"><span>每天可以点5次赞哦～</span></div>
                    </div>*/}
                </div>
                {/*评论*/}
                <p className="comments-title">评论</p>
                <div className="video-comments">
                    <div className="player-writer clearfix">
                        <div className="writer-img">
                            <img src={head} alt="作者头像" />
                        </div>
                        <ul className="writer-text">
                            <li className="text1">唐本达<img src={geren} alt="姓名" /><span>6小时前</span></li>
                            <li className="text3">面对父亲留下的奖牌，阿力曾仰望和渴望。泳池中的上浮与沉没也如阿力内心纠葛，意识和现实交织在阿力脑海中，充满着不同力量关系的对抗。偶然听到一段不曾被发现的录音。</li>
                        </ul>
                    </div>
                    <ul className="writer-huifu">
                        <li className="clearfix">
                            <div className="writer-img">
                                <img src={head} alt="作者头像" />
                            </div>
                            <ul className="writer-p">
                                <li className="p1">唐本达<span>6小时前</span></li>
                                <li className="p3">面对父亲留下的奖牌，阿力曾仰望和渴望。</li>
                            </ul>
                        </li>
                        <li className="clearfix">
                            <div className="writer-img">
                                <img src={head} alt="作者头像" />
                            </div>
                            <ul className="writer-p">
                                <li className="p1">唐本达<span>6小时前</span></li>
                                <li className="p3">面对父亲留下的奖牌，阿力曾仰望和渴望。</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div className="video-comments">
                    <div className="player-writer clearfix">
                        <div className="writer-img">
                            <img src={head} alt="作者头像" />
                        </div>
                        <ul className="writer-text">
                            <li className="text1">唐本达<img src={geren} alt="姓名" /><span>6小时前</span></li>
                            <li className="text3">面对父亲留下的奖牌，阿力曾仰望和渴望。</li>
                        </ul>
                    </div>
                </div>
                <div className="comments-all">
                    <a href="#">全部评论<img src={xiala} alt="下拉" /></a>
                    {this.state.textAreaType > 0?
                        <div className="comments-area">
                            <textarea ref="comment" placeholder="你也来说两句吧" onChange={this.showLength.bind(this)} maxLength={2000}></textarea>
                            <div className="btn-group">
                                <span className="tip">还可以输入<span className="num" ref="num">2000</span>个字</span>
                                <button className="gray-btn" onClick={this.cancel.bind(this)}>取消</button>
                                <button className="orange-btn" onClick={this.send.bind(this)}>发送</button>
                            </div>
                        </div>:<p className="none"><a href="javascript:;">登陆</a>后，查看更好评论</p>
                    }
                </div>
                <p className="comments-title">作者的其他视频</p>
                <ul className="other-video clearfix">
                    <li>
                        <img src={tupian} alt="其他" />
                        <p className="big">匠心反转广告《完美料理》</p>
                        <p className="small">企业宣传片</p>
                    </li>
                    <li>
                        <img src={tupian} alt="其他" />
                        <p className="big">匠心反转广告《完美料理》</p>
                        <p className="small">企业宣传片</p>
                    </li>
                    <li>
                        <img src={tupian} alt="其他" />
                        <p className="big">匠心反转广告《完美料理》</p>
                        <p className="small">企业宣传片</p>
                    </li>
                    <li>
                        <img src={tupian} alt="其他" />
                        <p className="big">匠心反转广告《完美料理》</p>
                        <p className="small">企业宣传片</p>
                    </li>
                </ul>
                <p className="m-tip">没有更多了</p>
            </div>
        )
    }
}


const MobileFilmDetail = connect(mapStateToProps,mapDispatchToProps)(MobileFilmDetailContainer) ;

export { MobileFilmDetail as default } ;
